<template>
  <div class="my-container">
    <!-- <van-nav-bar
  title="个人中心"
/> -->
<my-header title="个人中心"/>
<div>
  <div class="shezhi">
    <div class="touxiang">
      <img src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=1757702845,51708014&fm=26&gp=0.jpg" alt="">
    </div>
    <div class="message">
      <p class="youhu">用户昵称: &nbsp;&nbsp;晓晓</p>
      <p class="youhu">用户ID：&nbsp;&nbsp;888888</p>
      <p class="youhu">188xxxxxxxx</p>
    </div>
    <div class="ziliao" @click="$router.push('/edit')">编辑资料</div>
  </div>
  <div></div>
</div>
<div class="cart_one">
  <div class="cart_ones" @click="$router.push('/mycart')">购物车</div>
  <div class="cart_ones" @click="$router.push('/my/wallet')">钱包</div>
  <div class="cart_ones" @click="$router.push('/my/coupon')">我的优惠券</div>
</div>
<!-- <van-cell title="申请开店" is-link class="project" to='' /> -->
<van-cell title="推广赚钱" is-link class="project" to='/promotionShop' />
<van-cell title="我的推广" is-link class="project" to='/my/myCollection' />
<van-cell title="我的收货地址" is-link class="project" to='/myAddress' />
<van-cell title="收藏店铺" is-link class="project" to='/collectionStores' @click="changeHandle()"/>
<van-cell title="进店记录" is-link class="project" to='/collectionStores' @click="handle()"/>
<van-cell title="我的店铺" is-link class="project" to='/myDianPu' />
<van-cell title="帮助中心" is-link class="project" to='/my/helpCenter' />
<!-- <van-tabbar v-model="active">
  <van-tabbar-item to="/home">首页</van-tabbar-item>
  <van-tabbar-item to='/search'>周边店铺</van-tabbar-item>
  <van-tabbar-item to='/myStores'>商圈</van-tabbar-item>
  <van-tabbar-item to='/order'>订单</van-tabbar-item>
  <van-tabbar-item to='/my'>我的</van-tabbar-item>
</van-tabbar> -->
<!-- <van-tabbar v-model="active">
      <van-tabbar-item icon="home-o" to="/">首页</van-tabbar-item>
      <van-tabbar-item icon="search" to="/search">周边商铺</van-tabbar-item>
      <van-tabbar-item icon="shop-o" to="/myStores">商圈</van-tabbar-item>
      <van-tabbar-item icon="shopping-cart-o" to="/order">订单</van-tabbar-item>
      <van-tabbar-item icon="user-o" to="/my">我的</van-tabbar-item>
</van-tabbar> -->
  </div>
</template>

<script>
import { mapMutations } from 'vuex'
import MyHeader from './components/my-header.vue'
export default {
  name: 'myIndex',
  components: {
    MyHeader
  },
  props: {},
  data () {
    return {
      active: 0
    }
  },
  computed: {},
  watch: {},
  created () {
    this.change(4)
  },
  mounted () {

  },
  methods: {
    ...mapMutations('m_my', ['changeIndex']),
    ...mapMutations('m_myStores', ['changeActive']),
    change(i) {
      this.changeActive(i)
    },
    handle() {
      this.changeIndex(1)
    },
    changeHandle () {
      this.changeIndex(0)
    }
  }
}
// console.log(111)
</script>

<style scoped lang="less">
.cart_one {
 display: flex;
 justify-content: space-around;
  .cart_ones{
    width: 210px;
    height: 130px;
    line-height: 130px;
    text-align: center;
    border: 5px solid #02b6fd;
    font-size: 30px;
    color: red;
    margin: 15px 0;
    border-radius: 20%;
    box-shadow: 0px 0px 30px #02b6fd;
    background-color: #02b6fd;
  }
}
.project{
   margin: 15px 0px ;
   border: 1px solid #02b6fd;
   border-right: none;
}
.shezhi{
  height: 150px;
  background: #02b6fd;
  font-size: 24px;
  .touxiang{
    float: left;
    margin-left: 30px;
    margin-top: 35px;
    height: 90px;
    width: 90px;
    border-radius: 50%;
    // border: 8px solid #111;
    overflow: hidden;
    img{
      width: 100%;
      height: 100%;
      z-index: -1;
    }
  }
  .message{
    color: #fff;
    margin-top: 25px;
    float: left;
    .youhu{
      margin: 5px 0 0 15px;
    }
  }
  .ziliao{
    float: right;
    margin: 70px 50px 0 0;
  }
}
.van-cell {
  border: 5px solid #02b6fd;
  color: #02b6fd;
}
.my-container {
  background-color: #fff;
}
/deep/.van-icon-arrow-left {
  color: #02b6fd !important;
}
// .cart_ones {
// /deep/.cart_ones {
//   color: blue !important;
//   border: 2px solid blue;
// }
// }
</style>
